<template>
  <view class="move-container">
    <view class="header-container">
      <u-subsection
        :list="typeList"
        :current="currentAuditType"
        active-color="#56d39d"
        @change="changeAuditType"></u-subsection>
    </view>
    <!-- 作品 -->
    <AlbumList v-if="arthorAlbumList.length > 0" :album-list="arthorAlbumList" @handleDetail="handleDetail" @handleBatchAddArtAlbumWorks="handleBatchAddArtAlbumWorks"></AlbumList>
    <view v-else="!loadingList && arthorAlbumList.length === 0" class="no-data flex jc ac fw">
      <view style="width: 100%;" class="flex jc ac">
        <image style="width: 300rpx;height: 300rpx;" src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01CSQqUP2BzNNzcB96v_!!1888948409.png"></image>
      </view>
      <view class="tip">暂无数据~</view>
    </view>
    <!-- 提示没有数据 -->
    <!-- 操作栏 -->
    <!-- #ifdef H5 -->
    <view class="bottom-main">
      <view class="bottom-view">
        <block>
          <view @click="goBack()" class="bottom-view-button bottom-view-button-margin0">
            <text class="huiju-iconfont huiju-icon-fanhui1"></text>
            <text class="bottom-view-button-text">返回上一页</text>
          </view>
        </block>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
  import AlbumList from './components/albumList.vue'; // 专辑列表
  import { artworksMaterialAlbumList, batchAddArtAlbumWorks } from '@/api/artworks';
  import { mapGetters, mapState } from 'vuex';
  export default {
    components: {
      AlbumList
    },
    data() {
      return {
        loading: true,
        currentAuditType: '',
        typeList: [{
          value: '',
          name: '全部'
        },
        {
          value: 2,
          name: '头像'
        }, {
          value: 1,
          name: '壁纸'
        },
        {
          value: 3,
          name: '表情包'
        },
        {
          value: 6,
          name: '背景图'
        }],
        artworksList: [], // 作品列表
        searchForm: {
          type: '',
          pageNum: 1,
          pageSize: 5
        },
        arthorAlbumList: [],
        author_id: ''
      }
    },
    onLoad(options) {
      this.author_id = options.author_id;
      this.getArtworksMaterialAlbumList();
    },
    computed: {
      ...mapGetters([
        'artworksTypeAllListData',
      ]),
    },
    methods: {

      // 点击批量添加
      handleBatchAddArtAlbumWorks(id) {
        batchAddArtAlbumWorks({ id, author_id: this.author_id }).then(result => {
          console.log(result);
          if (result && result.data) {
            uni.showToast({
              title: '添加成功！',
              icon: 'success'
            })
          }
        })
      },

      // 点击查看详情
      handleDetail(id) {
        uni.navigateTo({ url: '/pages/commonAlbumPublish/detail?id=' + id })
      },

      // 根据主页id和作品类型去获取作品列表
      getArtworksMaterialAlbumList(loadMore) {
        if (!loadMore) {
          this.artworksList = [];
        }
        this.showNoMoreFlag = false;
        this.loadingList = true;
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        artworksMaterialAlbumList(this.searchForm).then(result => {
          uni.hideLoading();
          this.loadingList = false;
          if (result && result.data) {
            let artworksList = result.data.records;
            this.arthorAlbumList = [ ...this.arthorAlbumList, ...artworksList ];
            if (this.searchForm.pageNum === result.data.total_pages) {
              this.showNoMoreFlag = true;
            } else {
              this.searchForm.pageNum = this.searchForm.pageNum + 1;
            }
          } else {
            this.arthorAlbumList = [];
          }
        }).catch(() => {
          uni.hideLoading();
          this.loadingList = false;
        })
      },

      // 修改移动图片的类型
      changeAuditType(index) {
        this.searchForm.type = this.typeList[index].value;
        this.searchForm.pageNum = 1;
        this.arthorAlbumList = [];
        this.getArtworksMaterialAlbumList();
      },

      // 修改类型
      tabsChange(index) {
        this.searchForm.type = this.artworksTypeAllListData[index].id;
        this.artworksList = [];
        this.tabsCurrent = index;
        this.getArtworksMaterialAlbumList();
      },

      // 修改定制作品类型
      makeArtworksTabsChange(index) {
        this.searchForm.cate_id = this.makeArtworksTypeAllListData[index].id;
        this.artworksList = [];
        this.tabsCurrent = index;
        this.getArtworksMaterialAlbumList();
      },

      // 返回
      goBack() {
        uni.navigateBack({
          delta: 1
        })
      },
    },

    // 下拉加载
    onReachBottom() {
      if (!this.showNoMoreFlag) {
        this.getArtworksMaterialAlbumList();
      } else {
        uni.showToast({
          title: '没有更多的数据啦！',
          icon: 'none'
        })
      }
    },
  }
</script>

<style lang="scss">
  page{
    background-color: #fff;
  }

  .move-container{
    padding: 138rpx 24rpx 120rpx 24rpx;

    .header-container{
      height: 128rpx;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 32rpx 32rpx 0 32rpx;
      z-index: 9;
      background-color: #fff;
    }

    .tabs-container{
      padding: 12rpx 0;
    }

    .bottom-main{
      position: fixed;
      bottom: calc(var(--window-bottom) + 60rpx);
      z-index: 20;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      z-index: 2;

      .bottom-view{
        display: flex;
        justify-content: center;
        min-width: 260rpx;
        padding: 24rpx 30rpx;
        background: #fff;
        border: 2rpx solid $uni-color-primary2;
        border-radius: 92rpx;

        &-button{
          color: $uni-color-primary;
          font-size: 24rpx;
          position: relative;
          white-space: nowrap;

          &-text{
            color: $uni-color-primary;
            padding-left: 6rpx;
          }
        }

        &-button-before{
          &::before{
            content: "";
            position: absolute;
            right: 0;
            width: 2rpx;
            height: 32rpx;
            background: #e9e9e9;
          }
        }

        &-button-padding{
          padding-right: 16rpx;
          margin-right: 16rpx;
        }

        &-button-margin0{
          margin-right: 0;
          padding-right: 0;
        }
      }
    }
  }
</style>
